import { Button, Form, Input } from "antd";
import {useNavigate,useSearchParams} from 'react-router-dom'
import {store,LoginAction} from '../../store/index'
// 数据在login页面不改变，不需要连接
// 导入登录方法
import {login} from '../../api/index'

function Login() {
  // 跳转
  var navigate = useNavigate();
  // 查询参数
  var [search] = useSearchParams();
    // 验证成功
  const onFinish = (values) => {
    // console.log("Success:", values);
    // 定义操作完成的回调
    // function callback (){
    //     var redirect = search.get("redirect")||"/admin";
    //     navigate(redirect);
    // }
    // 出入回调函数 
    // LoginAction(values,callback)
    // 把callback转换为promise
    LoginAction(values)
    .then(res=>{
      var redirect = search.get("redirect")||"/admin";
      navigate(redirect);
      console.log("resolve数据",res)
    })
    .catch(err=>console.error("err",err))
    // // 使用登录
    // login(values)
    // .then(res=>{
    //   if(res.data.code===200){
    //     // 存储
    //     localStorage.setItem("token",res.data.token);
    //     localStorage.setItem("user",JSON.stringify(res.data.user));
    //     // 原生没有用 react-redux方法
    //     store.dispatch({type:"SET_USER",value:res.data.user})
    //     // 跳转到        
    //     var redirect = search.get("redirect")||"/admin";
    //     navigate(redirect);
    //   }
    //   console.log(res);
    // })
    // .catch(err=>console.log(err,"失败"))
     
  };
//   失败
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="login">
        {/* 标题 
        Form 表单   
            ---Form.item表单项
                ---Input输入框
                ---Input.Password  密码框
        className类名       name名称        labelCol标签列宽        wrapperCol 内容列宽        onFinish确定   onFinishFailed确定验证失败  autoComplete自动填充
        label 标签  name数据名称  rules表单验证规则 required必须验证挂载 message提示信息
         offset偏移列 span宽  在antd里面默认的数是8的倍数 一行分为24列
        */}
        <h1 className="tac">嗨库单车管理系统</h1>
      <Form
        className="form"
        name="basic"
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 20,
        }}
        
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="用户名:"
          name="name"
          rules={[
            {
              required: true,
              message: "请输入用户名!",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码："
          name="password"
          rules={[
            {
              required: true,
              message: "请输入密码",
            },
          ]}
        >
          <Input.Password />
        </Form.Item>
 

        <Form.Item
          wrapperCol={{
            offset:4,
            span: 20,
          }}
        >
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Login;
